<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="friends-table">
        <thead ><!--  表头-->
             <tr>
                 <td>序号</td>
                 <td>名字</td>
                 <td>家乡</td>
                 <td>未来想去的城市</td>

             </tr>
        </thead>
        <tbody>

        </tbody>
        
    </table>
   <ul id="container"> <!-- 无序列表 -->
   </ul>

    <script>
        const friends=[
           { index:1,name:'袁静', hometown:'丰城',city:'厦门'},
           {index:2,name:"王振华",hometown:'江西',city:'杭州'},
           {index:3,name:'许润乐',hometown:'南昌',city:'浙江'},
           {index :4,name :'黄亮',hometown : '南昌',city  :'杭州'}

        ];
       // 数组的每一项（对象） ->tr>td>
      
           
document.getElementById('friends-table')
       .querySelector('tbody')
       .innerHTML=friends.map(function(friend){

return `
           <tr>
            <td>${friend.index}</td>
            <td>${friend.name}</td>
            <td>${friend.hometown}</td>
            <td>${friend.city}</td>
            </tr>
         `   
      })      
       //console.log(newFriends,'-------------');
    const qiang={
        name:"刘国强",
        age:18,
        job:'大厂女成员的专属鼓励师',
        city:'重庆',
        blo:'写代码就像吃火锅一样，要爽'
    }
    const users=['夏侯欣','饶乐','王飞'];
    // let html='';
    // //  for(let i=0;i<users.length;i++){
    // //      html+='<li>'+users[i]+'</li>';
    // //  }
    
    // users.forEach(function(user,index){//（便利每一项执行）当前index下标内容
    // console.log(user,index)
    // html+='<li>'+users[index]+'</li>';
    // });

    //数组的每一项从字符串编程 变成html的字符串
 document.getElementById('container').innerHTML=users.map(function(user,index){//map功能比forEach强
    //console.log(user,index);
    return `<li>${user}</li>`//增加<li>属性
}).join('')//join 把数组每一项都拼接到一起

//document.getElementById('container').innerHTML=html;//显示在HTML页面上
// ='<div>'+qiang.name+'</div>'
// +'<div>'+qiang.age+'</div>'
// +'<div>'+qiang.job+'</div>'
// +'<div>'+qiang.city+'</div>'
// +'<div>'+qiang.blo+'</div>';
//字符串 div qiang.blo(变量) 模板 
// =`
// <div>${qiang .name}</div>
// <div>${qiang .age}</div>
// <div>${qiang .job}</div>
// <div>${qiang .city}</div>
// <div>${qiang .blo}</div>
// `
// =`
//             <li>${users[0]}</li>
//             <li>${users[1]}</li>
//             <li>${users[2]}</li>
//         `

    </script>
</body>
</html>